<template>
  <div class="chart-container">
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <ve-line :data="chartData"/>
      <ve-histogram :data="chartData"/>
      <ve-bar :data="chartData"/>
      <ve-pie :data="chartData2"/>
      <ve-ring :data="chartData2"/>
      <ve-waterfall :data="chartData3"/>
      <ve-funnel :data="chartData4"/>
    </el-row>
  </div>
</template>

<script>

import VeLine from 'v-charts/lib/line.common' // 折线图
import VeBar from 'v-charts/lib/bar.common' // 条形图
import VeHistogram from 'v-charts/lib/histogram.common' // 柱状图
import VePie from 'v-charts/lib/pie.common' // 饼图
import VeRing from 'v-charts/lib/ring.common' // 环图
import VeFunnel from 'v-charts/lib/funnel.common' // 漏斗图
import VeWaterfall from 'v-charts/lib/waterfall.common' // 瀑布图
import VeRadar from 'v-charts/lib/radar.common' // 雷达图
import VeMap from 'v-charts/lib/map.common' // 地图
import VeSankey from 'v-charts/lib/sankey.common' // 桑基图
import VeHeatmap from 'v-charts/lib/heatmap.common' // 热力图
import VeScatter from 'v-charts/lib/scatter.common' // 散点图
import VeCandle from 'v-charts/lib/candle.common' // k线图
import VeGauge from 'v-charts/lib/gauge.common' // 仪表盘
import VeTree from 'v-charts/lib/tree.common' // 树图
import VeBmap from 'v-charts/lib/bmap.common' // 百度地图
import VeAmap from 'v-charts/lib/amap.common' // 高德地图

export default {
  name: 'Demo',
  components: {
    VeLine, // 折线图
    VeBar, // 条形图
    VeHistogram, // 柱状图
    VePie, // 饼图
    VeRing, // 环图
    VeFunnel, // 漏斗图
    VeWaterfall, // 瀑布图
    VeRadar, // 雷达图
    VeMap, // 地图
    VeSankey, // 桑基图
    VeHeatmap, // 热力图
    VeScatter, // 散点图
    VeCandle, // k线图
    VeGauge, // 仪表盘
    VeTree, // 树图
    VeBmap, // 百度地图
    VeAmap // 高德地图
  },
  data() {
    return {
      chartData: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
        ]
      },
      chartData2: {
        columns: ['日期', '访问用户'],
        rows: [
          { '日期': '1/1', '访问用户': 1393 },
          { '日期': '1/2', '访问用户': 3530 },
          { '日期': '1/3', '访问用户': 2923 },
          { '日期': '1/4', '访问用户': 1723 },
          { '日期': '1/5', '访问用户': 3792 },
          { '日期': '1/6', '访问用户': 4593 }
        ]
      },
      chartData3: {
        columns: ['活动', '时间'],
        rows: [
          { '活动': '吃饭', '时间': 4 },
          { '活动': '睡觉', '时间': 10 },
          { '活动': '打豆豆', '时间': 5 }
        ]
      },
      chartData4: {
        columns: ['状态', '数值'],
        rows: [
          { '状态': '展示', '数值': 900 },
          { '状态': '访问', '数值': 600 },
          { '状态': '点击', '数值': 300 },
          { '状态': '订单', '数值': 100 }
        ]
      }
    }
  },
  mounted() {
  },
  methods: {

  }
}
</script>

<style scoped>
.chart-container{
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}
</style>

